<template>
    <div style="display: flex">
        <div style="width: 450px; height: 120px">
            <div class="box">
                <div class="bt">
                    <div>总销售额：</div>
                    <span class="rg">{{ total }}</span>
                    <span class="lf">万</span>
                </div>
                <div class="bt">
                    <div>销量榜首</div>
                    <span class="rg">{{ max }}</span>
                    <span class="lf">万</span>
                </div>
                <div class="bt">
                    <div>数据来源</div>
                    <span class="rg" style="font-size: 40px; margin-right: 0"
                        >{{ userStore.userInfo.adress }}
                    </span>
                </div>
            </div>
        </div>
        <div id="top-1-bar" style="width: 120px; height: 120px"></div>
        <div id="top-2-bar" style="width: 120px; height: 120px"></div>
        <div id="top-3-bar" style="width: 120px; height: 120px"></div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'

import echarts, { option1, option2, option3 } from './constant'
import useMainStore from '@/stores'

import { result } from '../../constant'

export default defineComponent({
    name: 'TopBar',
    setup() {
        const userStore = useMainStore().useUserStore()
        const constant = {
            option1,
            option2,
            option3
        }
        const state = reactive({
            total: 0,
            max: 0
        })
        onMounted(() => {
            state.total = result.reduce((sum: any, cur: any) => sum + +cur.totalSales, 0)
            constant.option1.title[1].text = result.length || 100
            constant.option2.title[1].text = result.reduce(
                (sum: any, cur: any) => sum + +cur.offlineStore,
                0
            )
            constant.option3.title[1].text = result.reduce(
                (sum: any, cur: any) => sum + +cur.OnlineStore,
                0
            )
            state.max = methods.getMax()
            echarts.init(document.getElementById('top-1-bar')).setOption(constant.option1)
            echarts.init(document.getElementById('top-2-bar')).setOption(constant.option2)
            echarts.init(document.getElementById('top-3-bar')).setOption(constant.option3)
        })
        const methods = {
            getMax() {
                let max = 0
                result.forEach((el: any) => {
                    max = Math.max(max, +el.totalSales)
                })
                return max
            }
        }
        return {
            ...toRefs(state),
            ...constant,
            ...methods,
            userStore
        }
    }
})
</script>

<style lang="scss" scoped>
.box {
    font-size: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    .bt {
        margin-right: 15px;
        .rg {
            color: #ffca0c;
            font-size: 50px;
            font-weight: 600;
            margin-right: 5px;
        }
    }
}
</style>
